<template>
  <div class="right-wrong-container">
    <div class="slide-container" :class="{ 'slide-left': isAnalysis }">
      <!-- 答题视图 -->
      <div class="answer-view">
        <div class="content-wrapper">
          <!-- 左侧材料区 -->
          <div class="left-content" v-if="examStore.currQuestion.materials">
            <div class="content-box" v-html="mathHTMLToShow(examStore.currQuestion.materials)"></div>
          </div>

          <!-- 右侧答题区 -->
          <div class="right-ask-in">
            <div class="header-top">提示语占位符</div>
            <div class="cen-ask">
              <askStatus :is-analysis="true" :is-correct="true" />

              <div class="right-content" :class="{ 'full-width': leftContent }">
                <div class="right-title" v-html="questions.content"></div>
                <div class="checkAll-status">
                  <div class="lists">
                    <div
                      class="list-item"
                      v-for="(item, index) in questions.list"
                      :key="index"
                    >
                      <div class="item-status">
                        <div
                          class="item-box"
                          @click="handleAnswer(index, true)"
                          :class="{ selected: userAnswers[index]?.yes }"
                        >
                          <span class="item-around">
                            <el-icon>
                              <Check />
                            </el-icon>
                          </span>
                        </div>
                      </div>
                      <div class="item-content">{{ item.text }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="footer-ask">
              <div class="footer-ask-center"></div>
            </div> -->
            <div class="header-top bottom">
              <div class="c-bottom">提示语占位符</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 解析视图 -->
      <div class="analysis-view">
        <div class="content-wrapper">
          <div v-if="leftContent" class="left-content">
            <div class="content-box" v-html="leftContent"></div>
          </div>
          <div class="right-content" :class="{ 'full-width': !leftContent }">
            <div class="analysis-list">
              <div
                v-for="(item, index) in questions.list"
                :key="index"
                class="analysis-item"
              >
                <div class="item-content">{{ item.text }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { mathHTMLToShow } from "@/utils/index";
import AskStatus from "../askStatus.vue";
import { useExam } from "@/stores/exam.js";
const examStore = useExam();

const props = defineProps({
  questions: {
    type: Object,
    required: true,
  },
  leftContent: {
    type: String,
    default: "",
  },
  isAnalysis: {
    type: Boolean,
    default: false,
  },
  correctAnswers: {
    type: Array,
    required: true,
  },
});

const userAnswers = ref([]);
const emit = defineEmits(["update:answers"]);

const handleAnswer = (index, isYes) => {
  if (!userAnswers.value[index]) {
    userAnswers.value[index] = { yes: false, no: false };
  }
  if (isYes) {
    userAnswers.value[index].yes = !userAnswers.value[index].yes;
    userAnswers.value[index].no = false;
  } else {
    userAnswers.value[index].no = !userAnswers.value[index].no;
    userAnswers.value[index].yes = false;
  }
  emit("update:answers", userAnswers.value);
};

const checkAnswer = (index) => {
  return (
    props.correctAnswers[index]?.yes === userAnswers.value[index]?.yes &&
    props.correctAnswers[index]?.no === userAnswers.value[index]?.no
  );
};
</script>

<style lang="scss" scoped>
.right-ask-in {
  // display: flex;
  flex: 1;

  .cen-ask {
    width: 100%;
    display: flex;
  }

  .footer-ask {
    justify-content: center;
    display: flex;

    .footer-ask-center {
    }
  }

  .header-top {
    width: 100%;
    height: 42px;
    background-color: #d3d3d3;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFang SC;
    font-weight: 400;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 22.4px;
    letter-spacing: 0%;
    color: #000000;

    &.bottom {
      width: 100%;
      background-color: #fff;
      .c-bottom {
        width: 200px;
        background-color: #d3d3d3;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.right-wrong-container {
  position: relative;
  overflow: hidden;

  .slide-container {
    display: flex;
    width: 200%;
    transition: transform 0.3s ease;

    // &.slide-left {
    //   transform: translateX(-50%);
    // }

    .answer-view,
    .analysis-view {
      width: 50%;
      flex-shrink: 0;
    }
  }

  .content-wrapper {
    display: flex;
    gap: 20px;

    .left-content {
      flex: 0 0 45%;

      .content-box {
        border-right: 1px solid #dcdfe6;
        // padding: 20px;
        height: 100%;
      }
    }

    .right-content {
      // flex: 0 0 55%;
      margin-left: 5px;

      &.full-width {
        flex: 1;
      }
    }
  }

  .right-title {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
  }

  .all-infos {
    display: flex;
    padding: 10px;
    align-items: center;
    font-size: 12px;
    color: #999;
    gap: 8px;
  }

  .list-item {
    display: flex;
    align-items: center;
    padding: 10px;

    .item-status {
      display: flex;
      align-items: center;
      margin-right: 10px;
      gap: 8px;

      .item-box {
        width: 24px;
        height: 24px;
        border: 1px solid #dcdfe6;
        // border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;

        &.selected {
          border-color: #126983;
          background-color: #126983;

          .item-around {
            display: block;
            background-color: #126983;

            :deep(.el-icon) {
              color: #fff;
            }
          }
        }

        .item-around {
          width: 16px;
          height: 16px;
          background-color: #fff;
          display: none;
          // border: 1px solid #fff;
          // border-radius: 50%;
        }
      }
    }

    .item-content {
      flex: 1;
    }
  }

  .analysis-list {
    .analysis-item {
      display: flex;
      align-items: center;
      padding: 10px;
      gap: 10px;
    }
  }
}
</style>
